<template>
  <view>
    <heardData></heardData>
    <view class="content">
      <view class="base_info">
        <uni-forms ref="baseForm" :modelValue="dataForm" label-width="150">
          <uni-forms-item label="订单编号">
            <uni-easyinput v-model="dataForm.ddbh" suffixIcon="link" placeholder="请输入订单号" />
          </uni-forms-item>
		  <uni-forms-item label="支付状态">
		    <uni-data-select v-model="dataForm.ddzfzt" placeholder="请选择支付状态" :localdata="[{text: '未支付', value: 0},{text: '已支付', value: 1}]"></uni-data-select>
		  </uni-forms-item>
		  <uni-forms-item label="出库状态">
		    <uni-data-select v-model="dataForm.ddcrkzt" placeholder="请选择出库状态" :localdata="[{text: '未出库', value: 0},{text: '已出库', value: 1}]"></uni-data-select>
		  </uni-forms-item>
		  <uni-forms-item label="发货状态">
		    <uni-data-select v-model="dataForm.ddfhzt" placeholder="请选择发货状态" :localdata="[{text: '未发货', value: 0},{text: '已发货', value: 1}]"></uni-data-select>
		  </uni-forms-item>
        </uni-forms>
      </view>
      <view class="goods">
		<view class="button-group">
		  <button type="primary" size="mini" @click="searchBtn"><uni-icons type="search" color='#fff'
		      size="15"></uni-icons>查询</button>
		</view>
        <view class="goods-table">
          <view class="heard">
            <text>订单号</text>
            <text>支付状态</text>
            <text>出库状态</text>
            <text>发货状态</text>
          </view>
          <view v-if="tableData.length !== 0">
			  <scroll-view class="list" scroll-y="true">
				  <uni-swipe-action-item v-for="(item, index) in tableData">
				    <view class="table-content" :key="index">
				      <view>{{ item.ddbh }}</view>
				      <view>{{ item.ddzfztwz}}</view>
				      <view>{{ item.ddcrkztwz }}</view>
				      <view>{{item.ddfhztwz}}</view>
				    </view>
				  </uni-swipe-action-item>
			  </scroll-view>
             <uni-load-more :status="status"  />
          </view>
          <view v-else>
            <kevy-empty :show="true" type="favor" text="没有数据哦~"></kevy-empty>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import heardData from "../../component/heard.vue" //组件引入
export default {
  components: { heardData },
  data() {
    return {
      dataForm: {
		  current: 1
      },
      ckData: [],
	  zfData: [],
	  fhData: [],
      tableData: [],
      cpmc: '', // 商品名称
      loading: false,
	  productList: [],
	  searchloading: false,
	  status: 'more'
    }
  },
  onLoad(query) {
  },
  onReachBottom () {
  	  if (this.status == 'noMore') {
  		return;
  	  }
  	  this.dataForm.current++;
  	  this.searchOrder();
  },
  created() {
	this.dataForm.yhsj = uni.getStorageSync('mobile')
	// this.getWorkDropdownList()
    this.searchOrder()
  },
  methods: {
	  searchBtn () {
		  this.tableData = []
		  this.dataForm.current = 1
		  this.searchOrder()
	  },
    searchOrder() {
	  uni.showLoading({title: '加载中...'});
      this.$request('mobile/getUserOrderList', 'post', { ...this.dataForm }).then(res => {
		uni.hideLoading();
        if (res.code == 200) {
		  this.tableData = this.tableData.concat(res.data.records);
		  // 判断是否还有更多数据
		  if (res.data.total <= this.tableData.length) {
		  	this.status = 'noMore'; // 没有更多数据
		  } else {
		  	this.status = 'more'; // 还有更多数据
		  }
        } else {
		  uni.showToast({title: res.msg,icon: 'none'});
		  this.tableData = []
		}
      })
    },
	getWorkDropdownList () {
		this.$request('mobile/getDropdownList', 'post', [{type: '支付状态'},{type: '出库状态'},{type: '发货状态'}]).then(res => {
			if (res.code == 200) {
				res.data.forEach(item => {
					if (item.type == '支付状态') {
						item.value.forEach(item => {
							item.value = item.dictCode
							item.text = item.dictValue
						})
						this.zfData = item.value
					}
					if (item.type == '出库状态') {
						item.value.forEach(item => {
							item.value = item.dictCode
							item.text = item.dictValue
						})
						this.ckData = item.value
					}
					if (item.type == '发货状态') {
						item.value.forEach(item => {
							item.value = item.dictCode
							item.text = item.dictValue
						})
						this.fhData = item.value
					}
				})
			}
		})
	},
	getProData (e) {
		if (e) {
			this.searchloading = true
			this.$request('mobile/getProNmBychannelProInfo', 'post', {yhsj: uni.getStorageSync('mobile'), cpmc: e}).then(res => {
				if (res.code == 200) {
					console.log(res)
					this.productList = res.data.productInfo
					this.searchloading = false
				}
			})
		}
	},
    detail(item) {
      uni.navigateTo({
          url: `/pages/orderdetail/index?ddbh=${item.ddbh}`
      });
    },
	editData (item) {
		uni.navigateTo({
		    url: `/pages/adminorder/add?ddbh=${item.ddbh}`
		});
	},
	add () {
		uni.navigateTo({
		    url: `/pages/adminorder/add`
		});
	}
  }
}
</script>

<style lang="scss">
.content{
	padding-bottom: 10rpx;
}
.base_info {
  background: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}
.submit_btn {
  margin: 20rpx;
}
.goods {
  margin: 20rpx;
  .table {
    .uni-table {
      width: 100% !important;
      min-width: auto !important;
      .uni-table-th {
        width: 20% !important;
        font-size: 28rpx !important;
      }
    }
  }
}
.button-group {
  margin: 30rpx 0 20rpx;
  button {
    width: 100%;
    text-align: center;
    background: #01a0fe;
  }
}
.button-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      width: 100%;
      text-align: center;
      &:first-child {
        background: #01a0fe;
      }
    }
  }
.goods-table {
  .heard {
    background: #e4ebf6;
		display: flex;
    text {
      flex: 1;
      font-weight: 500;
      font-size: 26rpx;
      text-align: center;
      color: #909399;
      border: 1px solid #ebeef5;
      padding: 20rpx 5rpx;
      &:last-child {
        border-right: none;
      }
    }
  }
  .table-content {
    background: #fff;
    display: flex;
    view {
      display: inline-flex;
      font-weight: 500;
      font-size: 26rpx;
      flex: 1;
      color: #909399;
      border: 1px solid #ebeef5;
      padding: 20rpx 5rpx;
      text-align: center;
      justify-content: center;
      align-items: center;
	  word-break: break-all;
      &:last-child {
        border-right: none;
      }
    }
  }
}
.primary-btn {
  display: inline-flex;
  width: 100rpx;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  font-size: 26rpx;
}
.error-btn {
  display: inline-flex;
  width: 100rpx;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
  font-size: 26rpx;
  .button {
    font-size: 26rpx;
    display: block;
    padding: 0;
    background-color: none;
    border: none;
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    color: #fff;
  }
}
.pro_info {
  padding: 20rpx;
  .uni-easyinput {
    margin-bottom: 20rpx;
  }
  .pro_image {
    border: 1px solid #ebeef5;
    width: 100%;
  }
}
.pro_btn {
  padding: 20rpx 20rpx 0;
}
button[type='primary'] {
  background-color: #409eff;
  color: #fff;
}
</style>